<template>
  <div class="shortAnswer">
    <div class="top"></div>
    <div class="radioBottom">
      <span class="title">{{ title }}</span>
      <div
        class="radio"
        :class="[{ isRadio: isRadio }]"
        @touchstart.prevent="start"
        @touchend="end"
      ></div>
      <span class="delete">
        <img class="delImg" src="@/assets/btn_delete_nor@2x.png" alt="" />
      </span>
    </div>
  </div>
</template>
<script>
export default {
  name: 'ShortAnswer',
  data () {
    return {
      loop: '',
      title: '长按开始录音',
      isRadio: false,
      recorder: ''
    }
  },
  methods: {
    start () {
      this.title = '正在录音·'
      this.isRadio = true
      // 再次清空定时器，防止重复注册定时器
      clearTimeout(this.loop)
      this.loop = setInterval(() => {
        this.title = this.title + '·'
        if (this.title.length === 10) {
          this.title = '正在录音·'
        }
      }, 500)
    },
    end () {
      this.title = '录音结束'
      this.isRadio = false
      // 清空定时器，防止重复注册定时器
      clearTimeout(this.loop)
    }
  }
}
</script>
<style scoped lang="less">
.shortAnswer {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #fff;
  .radioBottom {
    position: fixed;
    bottom: 80px;
    width: 100%;
    background-color: #f8f6f5;
    .title {
      position: absolute;
      top: 20px;
      left: 50%;
      transform: translateX(-50%);
      color: #999;
    }
    .radio {
      width: 200px;
      height: 200px;
      margin: 50px auto;
      background-image: url('~@/assets/btn_shuohua_press@2x.png');
      background-size: contain;
      &.isRadio {
        background-image: url('~@/assets/btn_shuohua_nor@2x.png');
      }
    }
    .delete {
      position: absolute;
      top: 80px;
      right: 60px;
      width: 108px;
      height: 108px;
      background: #e4dfdd;
      border-radius: 50%;
      text-align: center;
      padding-top: 10px;
      .delImg {
        width: 80%;
        object-fit: contain;
      }
    }
  }
}
</style>
